<template>
<div class="kine1">
<div id="line1" style="width:90%;height:450px;"></div>
</div>
</template>

<script>
// // / 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/toolbox");
require("echarts/lib/component/legend");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");



// //cli方法
// // / 引入 ECharts 主模块
// import echarts from "echarts/lib/echarts";
// // 引入柱状图
// import "echarts/lib/chart/bar";
// import "echarts/lib/chart/line";
// // 引入提示框和标题组件
// import "echarts/lib/component/toolbox";
// import "echarts/lib/component/legend";
// import "echarts/lib/component/tooltip";
// import "echarts/lib/component/title";

export default {
name: "echarts",
// 基于准备好的dom，初始化echarts实例
mounted() {
this.myChart = echarts.init(document.getElementById("line1"));
this.initData();
},
methods: {
initData() {
const option = {
title: {
text: "ECharts 入门示例"
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
this.myChart.setOption(option)
},

}
};
</script>

<style lang="scss" scoped>
.line1 {
display: flex;
justify-content: center;
}
</style>